import { Component, OnInit } from '@angular/core';
import { CustomerGood, CustomerGoodService } from './customer-good.service';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-customer-good-view',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">查看进货通知</h4>
      <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
    </div>
    <div class="modal-body">
      <!-- Row 1 -->
      <div class="row">
        <div class="col-md-3 mb-3">
          <label class="form-label">货主</label>
          <div class="form-control-plaintext">{{customerGood?.shipper || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">预计到货时间</label>
          <div class="form-control-plaintext">{{(customerGood?.estimatedArrivalTime | date:'yyyy-MM-dd HH:mm:ss') || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">客户订单号</label>
          <div class="form-control-plaintext">{{customerGood?.customerOrderNo || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">运输号码</label>
          <div class="form-control-plaintext">{{customerGood?.transportNo || '-'}}</div>
        </div>
      </div>

      <!-- Row 2 -->
      <div class="row">
        <div class="col-md-3 mb-3">
          <label class="form-label">运输公司</label>
          <div class="form-control-plaintext">{{customerGood?.transportCompany || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">供应商</label>
          <div class="form-control-plaintext">{{customerGood?.supplier || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">供应商编码</label>
          <div class="form-control-plaintext">{{customerGood?.supplierCode || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">单据状态</label>
          <div class="form-control-plaintext">{{customerGood?.status || '-'}}</div>
        </div>
      </div>

      <!-- Row 3 -->
      <div class="row">
        <div class="col-md-3 mb-3">
          <label class="form-label">车号</label>
          <div class="form-control-plaintext">{{customerGood?.carNo || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">司机</label>
          <div class="form-control-plaintext">{{customerGood?.driverName || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">司机电话</label>
          <div class="form-control-plaintext">{{customerGood?.driverPhone || '-'}}</div>
        </div>
        <div class="col-md-3 mb-3">
          <label class="form-label">进货通知单号</label>
          <div class="form-control-plaintext">{{customerGood?.purchaseOrderNo || '-'}}</div>
        </div>
      </div>

      <!-- Row 4 -->
      <div class="row">
        <div class="col-12 mb-3">
          <label class="form-label">备注</label>
          <div class="form-control-plaintext">{{customerGood?.remarks || '-'}}</div>
        </div>
      </div>

      <!-- Section: 进货通知明细 -->
      <h6 class="mt-4">进货通知明细</h6>
      <hr>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>序号</th>
            <th>商品编码</th>
            <th>数量</th>
            <th>计划占用储位数</th>
            <th>收货完成</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of customerGood?.items; let i = index">
            <td>{{ i + 1 }}</td>
            <td>{{item.productCode}}</td>
            <td>{{item.quantity}}</td>
            <td>{{item.plannedStorageSlots}}</td>
            <td>{{item.status}}</td>
          </tr>
          <tr *ngIf="!customerGood?.items?.length">
            <td colspan="5" class="text-center">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">关闭</button>
    </div>
  `,
  standalone: true,
  imports: [CommonModule, FormsModule]
})
export class CustomerGoodViewComponent implements OnInit {
  customerGood: CustomerGood;
  id: string;

  constructor(
    public modal: NgbActiveModal,
    private customerGoodService: CustomerGoodService
  ) {}

  ngOnInit() {
    if (this.id) {
      this.customerGoodService.getById(this.id).subscribe({
        next: (result) => {
          this.customerGood = result;
        }
      });
    }
  }
} 